import { FieldProps } from '@rjsf/utils';
import { CheckboxOptionType, Flex, Radio } from 'antd';
import React from 'react';

export const ButtonGroupField = ({ uiSchema, onChange }: FieldProps) => {
  const option = uiSchema['ui:options'].options as (
    | string
    | number
    | CheckboxOptionType<any>
  )[];
  const defaultValue = uiSchema['ui:options'].defaultValue;

  return (
    <Flex
      vertical
      gap='middle'
      align='center'>
      <Radio.Group
        options={option}
        optionType='button'
        buttonStyle='solid'
        defaultValue={defaultValue}
        size='middle'
        onChange={(e) => {
          onChange(e.target.value);
        }}
      />
    </Flex>
  );
};
